<!--
 * @FileDescription 选择ye
 * @Author cl
 * @Date 20240326 11:02:12
 * @LastEditors cl
 * @LastEditTime 20240326 11:02:12
-->
<template>
  <div class="wp_class">
    <div class="header">
      <h1>在线故障诊断数据共享平台</h1>
    </div>
    <div class="content">
      <div class="box">
        <div class="search">
          <div class="searchBtn" @click="searchFn"><img src="/public/images/页面三/搜索2x.png" class="searchImg"></div>
          <a-input class="searchIpt" v-model:value="inputVal" placeholder="搜索" />
        </div>
        <div class="btn">
          <div class="refresh" @click="refreshFn">
            <text class="refreshText">刷新</text>
          </div>
          <div class="goBack" @click="goBackFn">
            <text class="goBackText">返回</text>
          </div>
        </div>
      </div>
      <!--  @change="blurListener" -->
      <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="blurListener">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <button class="particulars" @click="toParticularsPage(record)">详情</button>
          </template>
        </template>
      </a-table>

    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus'
import { getFaultAppearance, getFaultPoint, getFaultPointById, postFaultPoint } from '@/api/apis';
import HomeContent from '@components/Apps/Simulation/HomeContent'
const router = useRouter()
async function refreshFn() {
  // 调用接口重新拿数据就好了，或者拿第一页的数据
  data.value = []
  let res = await getFaultPoint({PageNumber:1,pageSize:10})
  HomeContent.Default.pointData.value = res.data
  // HomeContent.Default.pointData.value = await getFaultPoint({PageNumber:1,pageSize:10}) 
  console.log('HomeContent.Default.pointData.value',HomeContent.Default.pointData.value);
  
  HomeContent.Default.pointData.value.forEach((element:any) => {
    data.value.push({SerialNumber:element.id,FaultPointName:element.name,DataEntry:element.editName,DataAuditing:element.auditName})  
  });
}
// const  current = ref(null)
const pagination = ref({
  current:1,
  pageSize: 10,
  showSizeChanger: false,
  showQuickJumper: true,
  showLessItems: false,
})
const postdata = ref({
  name:'周二',
  editName:'张三',
  auditName:'李四',
  terminal1:'011',
  terminal2:'022',
  appearance:'上山打老虎',
  faultCode:'777',
  resistor:'0.13',
  voltage:'220',
  analysis:'nooo',
  tStyleId:"5"
})
async function toParticularsPage(record:any) {
  // console.log('value',record.SerialNumber);
  // await getFaultPoint({PageNumber:1,pageSize:10000})
  // await postFaultPoint(postdata.value)
  // await getFaultPoint({})
  // let detailsData = await getFaultPointById(16)
  // console.log('res',detailsData);
  
  // router.push('ParticularsPage')
  // let res = await getFaultPointById(record.SerialNumber)
  // let res1 = await getFaultPointById(16)
  // console.log('========',res);
  // console.log('========',await getFaultPointById(16));
  router.push({ path: 'ParticularsPage', query: { Id: record.SerialNumber }})
}
const inputVal = ref(null)
const columns = [
  {
    title: '序号',
    dataIndex: 'SerialNumber',
    width: '6%',
  },
  {
    title: '故障点名称',
    dataIndex: 'FaultPointName',
    width: '26%',
  },
  {
    title: '数据录入',
    dataIndex: 'DataEntry',
    width: '26%',
  },
  {
    title: '数据审核',
    dataIndex: 'DataAuditing',
    width: '26%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '16%',
  },
];

const blurListener = (val:any) => {
// 处理失焦事件的逻辑
console.log('触发',val,pagination.value);
pagination.value.current = val.current
};
let data = ref<any>([
  {
    SerialNumber:'1',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'2',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'3',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'4',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'5',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'6',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'7',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'8',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'9',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'10',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'11',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'12',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'13',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'14',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'15',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'16',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'17',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'18',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'19',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'20',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'21',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'22',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'23',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'24',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'25',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'27',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },

  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },

  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
  {
    SerialNumber:'26',
    FaultPointName:'周一',
    DataEntry:'张三',
    DataAuditing:'李四'
  },
])

function goBackFn() {
  router.push('OptionBox')
}
function searchFn() {
  console.log('inputVal', typeof (inputVal.value));
  let dataArr: any[] = []
  data.value.forEach((element: any) => {
    if (element.FaultPointName.includes(inputVal.value)) {
      dataArr.push(element)
    }
  });
  if (!inputVal.value) {
    ElMessageBox.alert("请输入搜索内容", "提示", {
      confirmButtonText: "确认",
      center: true,
    });
  } else if (dataArr.length > 0) {
    data.value = dataArr
  } else {
    ElMessageBox.alert("没有此搜索项", "提示", {
      confirmButtonText: "确认",
      center: true,
    });
  }
}
onMounted(async()=>{
  let res = await getFaultPoint({PageNumber:1,pageSize:10})
  HomeContent.Default.pointData.value = res.data
  // HomeContent.Default.pointData.value = await getFaultPoint({PageNumber:1,pageSize:10})
  console.log('HomeContent.Default.pointData.value',HomeContent.Default.pointData.value);
  HomeContent.Default.pointData.value.forEach((element:any) => {
    data.value.push({SerialNumber:element.id,FaultPointName:element.name,DataEntry:element.editName,DataAuditing:element.auditName})  
  });
})
</script>

<style scoped>
.jump {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 68px;
}
.prev {
  width: 34px; 
  height:34px; 
  border-radius: 5px;
  border: 1px solid #374c65;
}
.down {
  width: 34px; 
  height:34px; 
  border-radius: 5px;
  border: 1px solid #374c65;
  margin-left: 12px;
}
.jumpDiv {
  width: 34px; 
  height:34px; 
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #374c65;
  color: #33cccc;
  text-align: center;
  line-height: 34px;
  margin-left: 12px;
  cursor:pointer
}
.jumpDiv:focus {
  background-color: #33cccc;
  color: black;
}
.wp_class {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  z-index: 999;
}

.header {
  width: 100%;
  height: 172px;
  background-image: url('/public/images/页面二/BG.png');
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  overflow: hidden;
}

h1 {
  color: white;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 5px;
  margin-top: 23px;
  margin-left: 97px;
}

.content {
  width: 1745px;
  height: 722px;
  /* border: 1px  solid white; */
  margin-left: 91px;
}

.box {
  display: flex;
  width: 100%;
  position: relative;
}

.search {
  width: 521px;
  height: 46px;
  border: 1px solid #33cccc;
  display: flex;
}

.searchBtn {
  width: 51px;
  height: 44px;
  background-color: #33cccc;
}

.searchImg {
  width: 30px;
  position: absolute;
  top: 50%;
  left: 0.6%;
  transform: translate(0, -50%);
  /* margin-left: 18px;
  margin-top: 15px; */
}

.searchIpt {
  display: inline-block;
  width: 470px;
  height: 44px;
  color: #808080;
  font-size: 20px;
}

.ant-input {
  background-color: transparent;
  border: none;
}

.btn {
  width: 369px;
  height: 46px;
  position: absolute;
  right: 0px;
  display: flex;
}

.refresh {
  width: 123px;
  height: 46px;
  color: #33cccc;
  font-size: 20px;
  line-height: 46px;
  border: 1px solid #33cccc;
  border-right: 0px;
  background-image: url('/public/images/页面三/刷新.png');
  background-repeat: no-repeat;
  background-size: 18%, 18%;
  background-position: 22% 55%;
}

.refreshText {
  margin-left: 58px;
}

.refresh:hover {
  background-color: #33cccc;
  background-image: url('/public/images/页面三/刷新-点击.png');
  background-repeat: no-repeat;
  background-size: 18%, 18%;
  background-position: 22% 55%;
  color: black;
}

.goBack {
  width: 123px;
  height: 46px;
  color: #33cccc;
  font-size: 20px;
  line-height: 46px;
  border: 1px solid #33cccc;
  background-image: url('/public/images/页面三/撤销.png');
  background-repeat: no-repeat;
  background-size: 18%, 18%;
  background-position: 22% 55%;
}

.goBackText {
  margin-left: 58px;
}

.goBack:hover {
  background-color: #33cccc;
  background-image: url('/public/images/页面三/返回-点击.png');
  background-repeat: no-repeat;
  background-size: 18%, 18%;
  background-position: 22% 55%;
  color: black;
}

:deep(th.ant-table-cell::before) {
  content: none !important;
}

:deep(.ant-table-thead > tr > th) {
  color: #33cccc;
  font-size: 20px;
  padding: 12px;
  text-align: center;
  background-color: black;
  border-bottom: 1px solid #374c65;
  background-image: url('/public/images/页面三/标题背景.png');
  background-repeat: no-repeat;
}

:deep(.ant-table table) {
  color: aliceblue;
  font-size: 18px;
  background-color: black;
  text-align: center;
}

:deep(.ant-table) {
  margin-top: 45px;
  background: transparent;
}

:deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #374c65;
  padding: 6px;
  background: transparent;
}

:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
  background: #1c4a50;
}

.particulars {
  width: 62px;
  height: 29px;
  color: #33cccc;
  border: 1px solid #33cccc;
}

.particulars:hover {
  color: black;
  background-color: #33cccc;
}

:deep(.ant-table-pagination.ant-pagination) {
  margin-top: 50px;
}

:deep(.ant-table-pagination-right) {
  justify-content: center;
}

:deep(.ant-pagination-prev .ant-pagination-item-link) {
  background-color: transparent;
  border: none;
}

:deep(.ant-pagination-next .ant-pagination-item-link) {
  background-color: transparent;
  border: none;
}

:deep(.anticon svg) {
  color: #515152;
}

:deep(.ant-pagination-item-active) {
  border-color: #33cccc;
}

:deep(.ant-pagination-item-active a) {
  color: black !important;
  background-color: #33cccc !important;
  border-radius: 5px;
}

:deep(.ant-pagination-item) {
  background-color: transparent;
  border: none;
  color: white;
}

:deep(.ant-pagination-item a) {
  color: white;
}

:deep(.ant-pagination-options-quick-jumper) {
  color: white;
}

:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
  color: white;
}

:deep(.ant-pagination-options-quick-jumper input) {
  width: 31px;
  height: 30px;
  font-weight: 600;
  border-radius: 0px;
  padding: 3px;
  background-color: #33cccc;
  border-color: #33cccc;
  text-align: center;
  border-radius: 5px;
}

:deep(.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis) {
  color: white;
}

:deep(.ant-table-tbody tr:nth-child(even)) {
  background-color: #121a21;
}

:deep(.ant-pagination-options-quick-jumper input:focus) {
  box-shadow: none;
}

:deep(.ant-pagination-prev) {
  border: 1px solid #202d3d;
  border-radius: 5px;
}

:deep(.ant-pagination-item) {
  border: 1px solid #202d3d;
  border-radius: 5px;
}

:deep(.ant-pagination-next .ant-pagination-item-link) {
  border: 1px solid #202d3d;
  border-radius: 5px;
}
:deep(.ant-empty-description) {
  color: #33cccc;
}
:deep(.ant-table-tbody > tr.ant-table-placeholder:hover > td) {
  background-color: transparent;
}
</style>